<template>
    <div id="SetTimeDiscount">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-home"></i>定价管理</el-breadcrumb-item>
                <el-breadcrumb-item>限时折扣</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-select v-model="query.auditState" @change="handleSearch" clearable placeholder="审核状态" class="handle-select mr10">
                    <el-option key="1" label="已上线" :value="1"></el-option>
                    <el-option key="2" label="待审核" :value="2"></el-option>
                    <el-option key="3" label="已关闭" :value="3"></el-option>
                    <el-option key="4" label="已下线" :value="4"></el-option>
                </el-select>
                <el-button type="default" @click="handleAddDiscount">添加折扣</el-button>
            </div>
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
            >
                <el-table-column label="产品ID" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <el-table-column label="名称" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.name }}</template>
                </el-table-column>

                <el-table-column label="价格" align="left" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <!-- {{ scope.row.price + '\r\n' + scope.row.price * 0.9  }} -->
                        <!-- <span class="discount-price" :data-text="'已优惠9折'"> {{ scope.row.price * 0.9 }}元</span> -->
                        <span
                            class="discount-price"
                            :style="{
                                'font-weight': 500,
                                'font-size': '14px'
                            }"
                        >
                            {{ scope.row.onsalePrice }}元</span
                        >
                        <span
                            class="after"
                            :style="{
                                display: 'inline-block',
                                width: 'auto',
                                height: '15px',
                                'line-height': '15px',
                                'font-weight': 'normal',
                                'font-size': '12px',
                                'background-color': 'rgba(0, 0, 0, 0.7)',
                                color: '#fff',
                                'border-radius': '7.5px',
                                padding: '0 2px 0',
                                position: 'absolute',
                                top: '10px',
                                right: '10px'
                            }"
                        >
                            <!-- 折扣{{ scope.row.onsaleRate ? scope.row.onsaleRate : scope.row.price / scope.row.onsalePrice }}折 -->
                            折扣{{ scope.row.onsaleRate }}折
                        </span>
                        <br />
                        <span style="font-size: 12px;">原价: {{ scope.row.price }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="开始时间" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.validityStart }}</template>
                </el-table-column>
                <el-table-column label="结束时间" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.validityEnd }}</template>
                </el-table-column>

                <el-table-column label="状态" align="center" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{
                        scope.row.auditState == 1
                            ? '已上线'
                            : scope.row.auditState == 2
                            ? '待审核'
                            : scope.row.auditState == 3
                            ? '已关闭'
                            : scope.row.auditState == 4
                            ? '已下线'
                            : ''
                    }}</template>
                </el-table-column>

                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                        <el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>

                        <el-button type="text" class="red" @click="handleAudit(scope.$index, scope.row)">审核</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total,sizes, prev, pager, next, jumper"
                    :page-sizes="[5, 10, 20, 30]"
                    @size-change="handleSizeChange"
                    :current-page="query.pageIndex + 1"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 添加折扣弹出框 -->
        <el-dialog title="添加折扣" :visible.sync="discountVisible" width="50%">
            <el-form ref="discountform" :model="discountform" label-width="120px">
                <!-- <el-form-item label="会员名称:">
                    <el-select v-model="discountform.name" placeholder="" :clearable="true" class="handle-select">
                        <el-option key="0" label="恶意投诉" :value="0"></el-option>
                        <el-option key="1" label="频繁发布广告" :value="1"></el-option>
                    </el-select>
                    - <el-input class="handle-select" v-model="discountform.name"></el-input>
                </el-form-item> -->

                <el-form-item label="产品ID:">
                    <el-input v-model="discountform.productId"></el-input>
                </el-form-item>

                <el-form-item label="产品名称:">
                    <el-input v-model="discountform.productName"></el-input>
                </el-form-item>

                <!-- <el-form-item label="促销渠道:">
                    <el-select v-model="discountform.name" placeholder="" :clearable="true" class="handle-select">
                        <el-option key="0" label="OPPO" :value="0"></el-option>
                        <el-option key="1" label="VIVO" :value="1"></el-option>
                    </el-select>
                </el-form-item> -->

                <el-form-item label="原价:">
                    <el-input @input="oninput" oninput="value=value.replace(/[^0-9.]/g,'')" v-model="discountform.price"></el-input>
                </el-form-item>

                <el-form-item label="折扣:">
                    <el-input
                        oninput="value=value.replace(/[^0-9.]/g,'')"
                        v-model="discountform.onsaleRate"
                        @input="oninput"
                        placeholder="请输入折扣百分比(%)"
                    >
                        <span slot="suffix" class="iconfont icon-baifenbi"></span>
                    </el-input>
                </el-form-item>

                <el-form-item label="折扣后现价:">
                    <el-input oninput="value=value.replace(/[^0-9.]/g,'')" v-model="discountform.onsalePrice"></el-input>
                </el-form-item>

                <el-form-item label="是否首月折扣:">
                    <el-checkbox v-model="discountform.onceMonth">首月折扣</el-checkbox>
                </el-form-item>

                <el-form-item label="生效时间：">
                    <el-date-picker style="width:100%" v-model="discountform.validityStart" type="datetime" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="结束时间：">
                    <el-date-picker style="width:100%" v-model="discountform.validityEnd" type="datetime" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="产品下架时间：">
                    <el-date-picker style="width:100%" v-model="discountform.onlineTime" type="datetime" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="">
                    <el-radio v-model="discountform.state" label="1">开启</el-radio>
                    <el-radio v-model="discountform.state" label="2">关闭</el-radio>
                </el-form-item>

                <el-form-item label="备注信息:">
                    <el-input
                        type="textarea"
                        class="w"
                        placeholder="输入变更信息"
                        v-model="discountform.mark"
                        maxlength="120"
                        show-word-limit
                        rows="5"
                    >
                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="discountVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveDiscount">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 修改弹出框 -->
        <!-- <el-dialog title="修改" :visible.sync="editVisible" width="50%">
            <el-form ref="form" :model="form" label-width="120px">
                <el-form-item label="产品名称:">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="资源类型:">
                    <el-select v-model="form.name" placeholder="" :clearable="true" style="width:100%" class="">
                        <el-option key="0" label="恶意投诉" :value="0"></el-option>
                        <el-option key="1" label="频繁发布广告" :value="1"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="促销渠道:">
                    <el-select v-model="form.name" placeholder="" :clearable="true" style="width:100%" class="">
                        <el-option key="0" label="OPPO" :value="0"></el-option>
                        <el-option key="1" label="VIVO" :value="1"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="原价:">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>

                <el-form-item label="折扣:">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>

                <el-form-item label="折扣后现价:">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>

                <el-form-item label="关联资源:">
                    <el-button type="default" @click="handleAddRelSource">添加</el-button>
                </el-form-item>

                <el-form-item label="开始时间：">
                    <el-date-picker style="width:100%" v-model="form.name" type="datetime" placeholder="选择日期"> </el-date-picker>
                </el-form-item>

                <el-form-item label="结束时间：">
                    <el-date-picker style="width:100%" v-model="form.name" type="datetime" placeholder="选择日期"> </el-date-picker>
                </el-form-item>

                <el-form-item label="">
                    <el-radio v-model="form.name" label="1">开启</el-radio>
                    <el-radio v-model="form.name" label="2">关闭</el-radio>
                </el-form-item>

                <el-form-item label="产品模版:">
                    <el-input
                        type="textarea"
                        class="w"
                        placeholder="模版ID信息"
                        v-model="form.name"
                        maxlength="120"
                        show-word-limit
                        rows="5"
                    >
                    </el-input>
                </el-form-item>

                <el-form-item label="备注信息:">
                    <el-input
                        type="textarea"
                        class="w"
                        placeholder="输入变更信息"
                        v-model="form.name"
                        maxlength="120"
                        show-word-limit
                        rows="5"
                    >
                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveEdit">提交审核</el-button>
                <el-button @click="editVisible = false">取 消</el-button>
            </span>
        </el-dialog> -->
        <!-- 修改 -->
        <el-dialog title="修改" :visible.sync="editVisible" width="50%">
            <el-form ref="editform" :model="editform" label-width="120px">
                <el-form-item label="产品ID:">
                    <el-input v-model="editform.productId"></el-input>
                </el-form-item>

                <el-form-item label="产品名称:">
                    <el-input v-model="editform.name"></el-input>
                </el-form-item>

                <!-- <el-form-item label="促销渠道:">
                    <el-select v-model="form.name" placeholder="" :clearable="true" style="width:100%" class="">
                        <el-option key="0" label="OPPO" :value="0"></el-option>
                        <el-option key="1" label="VIVO" :value="1"></el-option>
                    </el-select>
                </el-form-item> -->

                <el-form-item label="原价:">
                    <el-input @input="oninput_" oninput="value=value.replace(/[^0-9.]/g,'')" v-model="editform.price"></el-input>
                </el-form-item>

                <el-form-item label="折扣:">
                    <el-input
                        oninput="value=value.replace(/[^0-9.]/g,'')"
                        v-model="editform.onsaleRate"
                        @input="oninput_"
                        placeholder="请输入折扣百分比(%)"
                    >
                        <span slot="suffix" class="iconfont icon-baifenbi"></span
                    ></el-input>
                </el-form-item>

                <el-form-item label="折扣后现价:">
                    <el-input oninput="value=value.replace(/[^0-9.]/g,'')" v-model="editform.onsalePrice"></el-input>
                </el-form-item>

                <el-form-item label="是否首月折扣:">
                    <el-checkbox v-model="editform.onceMonth">首月折扣</el-checkbox>
                </el-form-item>

                <el-form-item label="生效时间：">
                    <el-date-picker style="width:100%" v-model="editform.validityStart" type="datetime" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="结束时间：">
                    <el-date-picker style="width:100%" v-model="editform.validityEnd" type="datetime" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="产品下架时间：">
                    <el-date-picker style="width:100%" v-model="editform.onlineTime" type="datetime" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="">
                    <el-radio v-model="editform.state" label="1">开启</el-radio>
                    <el-radio v-model="editform.state" label="2">关闭</el-radio>
                </el-form-item>

                <el-form-item label="备注信息:">
                    <el-input
                        type="textarea"
                        class="w"
                        placeholder="输入变更信息"
                        v-model="editform.mark"
                        maxlength="120"
                        show-word-limit
                        rows="5"
                    >
                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveEdit">提交审核</el-button>
                <el-button @click="editVisible = false">取消</el-button>
            </span>
        </el-dialog>
        <!-- 审核 -->
        <el-dialog title="审核" :visible.sync="auditVisible" width="50%">
            <el-form ref="auiditform" :model="auiditform" label-width="120px">
                <el-form-item label="审核意见:">
                    <el-input
                        type="textarea"
                        class="w"
                        placeholder="输入变更信息"
                        v-model="auiditform.desc"
                        maxlength="120"
                        show-word-limit
                        rows="5"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="审核状态:">
                    <el-select v-model="auiditform.auditState" placeholder="" :clearable="true" class="handle-select">
                        <el-option key="1" label="待审核" :value="1"></el-option>
                        <el-option key="2" label="审核通过" :value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveAudit">保存审核</el-button>
                <el-button @click="auditVisible = false">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
// import { fetchData } from '@/api/index';
import NProgress from 'nprogress';
export default {
    name: 'SetTimeDiscount',
    data() {
        return {
            query: {
                // address: '',
                // name: '',
                auditState: '',
                pageIndex: 0,
                pageSize: 10
            },
            tableData: [],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            discountVisible: false,
            auditVisible: false,
            pageTotal: 0,
            form: {},
            discountform: {
                productName: '',
                productId: '',
                price: '',
                onsaleRate: '',
                onsalePrice: '',
                onceMonth: false,
                validityStart: '',
                validityEnd: '',
                onlineTime: '',
                state: '',
                mark: ''
            },
            editform: {
                id: '',
                productId: '',
                productName: '',
                auditionLimit: '',
                downloadLimit: '',
                price: '',
                type: '',
                onsaleRate: '',
                onsalePrice: '',
                onceMonth: '',
                currency: '',
                validityStart: '',
                validityEnd: '',
                onlineTime: '',
                state: '',
                templeteBody: '',
                mark: ''
            },
            auiditform: {
                productId: '',
                desc: '',
                auditState: ''
            },
            idx: -1,
            id: -1
        };
    },
    activated() {
        this.getData();
    },
    methods: {
        handleAddDiscount() {
            this.discountVisible = true;
        },
        oninput() {
            this.discountform.onsalePrice = this.discountform.price * (this.discountform.onsaleRate / 100);
        },
        oninput_() {
            this.editform.onsalePrice = this.editform.price * (this.editform.onsaleRate / 100);
        },
        // 保存添加折扣
        async saveDiscount() {
            try {
                const url = '/productExt/create';
                const { data: res } = await this.$http[0].post(
                    url,
                    this.$objTostring(
                        this.$removeField({
                            productName: this.discountform.productName,
                            productId: this.discountform.productId,
                            price: this.discountform.price,
                            onsaleRate: this.discountform.onsaleRate,
                            onsalePrice: this.discountform.onsalePrice,
                            onceMonth: this.discountform.onceMonth,
                            validityStart: this.$standardDateToTimstamp(this.discountform.validityStart),
                            validityEnd: this.$standardDateToTimstamp(this.discountform.validityEnd),
                            onlineTime: this.$standardDateToTimstamp(this.discountform.onlineTime),
                            state: this.discountform.state,
                            mark: this.discountform.mark
                        })
                    ),
                    // {
                    //     // productId
                    //     productName: this.discountform.productName,
                    //     // auditionLimit
                    //     // downloadLimit
                    //     price: this.discountform.price,
                    //     // type:
                    //     onsaleRate: this.discountform.onsaleRate,
                    //     onsalePrice: this.discountform.onsalePrice,
                    //     onceMonth: this.discountform.onceMonth,
                    //     // currency
                    //     validityStart: this.$standardDateToTimstamp(this.discountform.validityStart),
                    //     validityEnd: this.$standardDateToTimstamp(this.discountform.validityEnd),
                    //     onlineTime: this.$standardDateToTimstamp(this.discountform.onlineTime),
                    //     state: this.discountform.state,
                    //     // templeteBody
                    //     mark: this.discountform.mark
                    // },
                    {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    }
                );
                console.log(res);
                this.$message.success({
                    duration: 1500,
                    message: res.message
                });
                this.form = {
                    productName: '',
                    price: '',
                    onsaleRate: '',
                    onsalePrice: '',
                    onceMonth: false,
                    validityStart: '',
                    validityEnd: '',
                    onlineTime: '',
                    state: '',
                    mark: ''
                };
                this.discountVisible = false;
                this.getData();
            } catch (err) {
                console.dir(err);
                this.discountVisible = false;
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        // 获取 easy-mock 的模拟数据
        async getData() {
            try {
                NProgress.start();
                const url = '/productExt/query';
                const { data: res } = await this.$http[0].get(url, {
                    params: {
                        auditState: this.query.auditState,
                        page: this.query.pageIndex,
                        size: this.query.pageSize
                    }
                });
                console.log(res);
                if (res.data.content && res.data.content.length > 0) {
                    res.data.content.map(item => {
                        item.validityStart = this.$dateFormat(item.validityStart, '', '-');
                        item.validityEnd = this.$dateFormat(item.validityEnd, '', '-');
                    });
                    this.tableData = res.data.content;
                    this.pageTotal = res.data.totalElements || 0;
                } else {
                    this.tableData = [];
                    this.pageTotal = 0;
                }
                NProgress.done();
            } catch (err) {
                console.dir(err);
                NProgress.done();
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
            // fetchData(this.query).then(res => {
            //     console.log(res);
            //     this.tableData = res.list;
            //     this.pageTotal = res.pageTotal || 50;
            // });
        },
        // 添加关联资源
        handleAddRelSource() {
            this.editVisible = false;
            this.$router.replace({
                path: '/limit/rel/source'
            });
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 0);
            this.getData();
        },
        handleAudit(index, row) {
            this.auditVisible = true;
            console.log(index, row);
            this.auiditform = {
                productId: row.productId,
                desc: row.desc,
                auditState: row.auditState
            };
        },
        async saveAudit() {
            try {
                const url = '/productExt/audit';
                const { data: res } = await this.$http[0].post(
                    url,
                    this.$objTostring(
                        this.$removeField({
                            productId: this.auiditform.productId,
                            desc: this.auiditform.desc,
                            auditState: this.auiditform.auditState
                        })
                    ),
                    // {
                    //     productId: this.auiditform.productId,
                    //     desc: this.auiditform.desc,
                    //     auditState: this.auiditform.auditState
                    // },
                    {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    }
                );
                console.log(res);
                this.$message.success({
                    message: res.message,
                    duration: 1500
                });
                this.getData();
                this.auditVisible = false;
            } catch (err) {
                console.dir(err);
                this.auditVisible = false;
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        // 删除操作
        handleDelete(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.$message.success('删除成功');
                    this.tableData.splice(index, 1);
                })
                .catch(() => {});
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        delAllSelection() {
            const length = this.multipleSelection.length;
            let str = '';
            this.delList = this.delList.concat(this.multipleSelection);
            for (let i = 0; i < length; i++) {
                str += this.multipleSelection[i].name + ' ';
            }
            this.$message.error(`删除了${str}`);
            this.multipleSelection = [];
        },
        // 编辑操作
        handleEdit(index, row) {
            console.log(index, row);

            this.editform = {
                id: row.id,
                productId: row.productId,
                // productName: row.productName,
                name: row.name,
                auditionLimit: row.auditionLimit,
                downloadLimit: row.downloadLimit,
                price: row.price,
                type: row.type,
                onsaleRate: row.onsaleRate,
                onsalePrice: row.onsalePrice,
                onceMonth: row.onceMonth,
                currency: row.currency,
                validityStart: this.$timstampToStandardDate(new Date(row.validityStart).getTime()),
                validityEnd: this.$timstampToStandardDate(new Date(row.validityEnd).getTime()),
                onlineTime: this.$timstampToStandardDate(row.onlineTime),
                state: row.state,
                templeteBody: row.templeteBody,
                mark: row.mark
            };
            // this.idx = index;
            // this.form = row;
            this.editVisible = true;
        },
        // 保存编辑
        async saveEdit() {
            try {
                const url = '/productExt/update';
                const { data: res } = await this.$http[0].post(
                    url,
                    this.$objTostring(
                        this.$removeField({
                            id: this.editform.id,
                            productId: this.editform.productId,
                            name: this.editform.name,
                            auditionLimit: this.editform.auditionLimit,
                            downloadLimit: this.editform.downloadLimit,
                            price: this.editform.price,
                            type: this.editform.type,
                            onsaleRate: this.editform.onsaleRate,
                            onsalePrice: this.editform.onsalePrice,
                            onceMonth: this.editform.onceMonth,
                            currency: this.editform.currency,
                            validityStart: this.$standardDateToTimstamp(this.editform.validityStart),
                            validityEnd: this.$standardDateToTimstamp(this.editform.validityEnd),
                            onlineTime: this.$standardDateToTimstamp(this.editform.onlineTime),
                            state: this.editform.state,
                            templeteBody: this.editform.templeteBody,
                            mark: this.editform.mark
                        })
                    ),
                    // {
                    //     id: this.editform.id,
                    //     productId: this.editform.productId,
                    //     name: this.editform.name,
                    //     auditionLimit: this.editform.auditionLimit,
                    //     downloadLimit: this.editform.downloadLimit,
                    //     price: this.editform.price,
                    //     type: this.editform.type,
                    //     onsaleRate: this.editform.onsaleRate,
                    //     onsalePrice: this.editform.onsalePrice,
                    //     onceMonth: this.editform.onceMonth,
                    //     currency: this.editform.currency,
                    //     validityStart: this.$standardDateToTimstamp(this.editform.validityStart),
                    //     validityEnd: this.$standardDateToTimstamp(this.editform.validityEnd),
                    //     onlineTime: this.$standardDateToTimstamp(this.editform.onlineTime),
                    //     state: this.editform.state,
                    //     templeteBody: this.editform.templeteBody,
                    //     mark: this.editform.mark
                    // },
                    {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    }
                );
                console.log(res);
                this.$message.success({
                    message: res.message,
                    duration: 1500
                });
                this.getData();
                this.editVisible = false;
            } catch (err) {
                console.dir(err);
                this.editVisible = false;
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },

        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val - 1);
            this.getData();
        },
        handleSizeChange(val) {
            this.$set(this.query, 'pageSize', val);
            this.getData();
        }
    }
};
</script>

<style lang="scss">
#SetTimeDiscount {
    .el-table_1_column_3 {
        position: relative;
        .discount-price {
            // font-weight: 500;
            // font-size: 14px;
        }
        .after {
            // content: attr(data-text);
            // display: inline-block;
            // width: auto;
            // height: 15px;
            // line-height: 15px;
            // font-weight: normal;
            // font-size: 12px;
            // background-color: rgba(0, 0, 0, 0.7);
            // color: #fff;
            // border-radius: 7.5px;
            // padding: 0 2px 0;
            // position: absolute;
            // top: 10px;
            // right: 2px;
        }
    }

    .handle-box {
        margin-bottom: 20px;
        text-align: right;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
}
</style>
